<template>
    <div class="wrap">
        <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="#FC605A">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <van-grid :border="false" :column-num="4" style="margin-top:-0.2rem">
            <van-grid-item>
                <van-image src="http://172.16.40.70/shop/img/homenav1.png" />
            </van-grid-item>
            <van-grid-item>
                <van-image src="http://172.16.40.70/shop/img/homenav2.png" />
            </van-grid-item>
            <van-grid-item>
                <van-image src="http://172.16.40.70/shop/img/homenav3.png" />
            </van-grid-item>
            <van-grid-item>
                <van-image src="http://172.16.40.70/shop/img/homenav4.png" />
            </van-grid-item>
        </van-grid>
        <van-grid :border="false" style="margin-top:0.3rem;" class="index-nav" icon-size="2.5rem">
            <van-grid-item icon="http://172.16.40.70/shop/img/qnav1.png" text="我的店铺" />
            <van-grid-item icon="http://172.16.40.70/shop/img/qnav2.png" text="招商加盟" />
            <van-grid-item icon="http://172.16.40.70/shop/img/qnav3.png" text="我的喜欢" />
            <van-grid-item icon="http://172.16.40.70/shop/img/qnav4.png" text="猜你喜欢" />
        </van-grid>
        <div class="home-newgoods ui-box">
            <img class="home-imgtit" src="http://172.16.40.70/shop/img/hometit1.jpg" alt="">
            <div class="list-type1 plist-puzzle">
                <a class="b" href=""><img src="uploads/t1.jpg" alt=""></a>
                <div class="s ui-flex-vt flex-justify-sb">
                    <a class="box" href=""><img src="uploads/t2.jpg" alt=""></a>
                    <a class="box" href=""><img src="uploads/t2.jpg" alt=""></a>
                    <a class="box" href=""><img src="uploads/t2.jpg" alt=""></a>
                </div>
            </div>
            <img class="home-imgtit" src="http://172.16.40.70/shop/img/hometit2.jpg" alt="">
            <van-grid :border="false" :column-num="3" class="list-type2">
                <van-grid-item>
                    <van-image src="uploads/t3.jpg" />
                    <span class="tit">情侣穿搭</span>
                </van-grid-item>
                <van-grid-item>
                    <van-image src="uploads/t3.jpg" />
                    <span class="tit">约会美搭</span>
                </van-grid-item>
                <van-grid-item>
                    <van-image src="uploads/t3.jpg" />
                    <span class="tit">全部新款</span>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="home-fashion ui-box ui-border-t">
            <img class="home-imgtit" src="http://172.16.40.70/shop/img/hometit3.jpg" alt="">
            <a href=""><img class="db margin-b-s" src="uploads/t4.jpg" width="100%" alt=""></a>
            <van-row class="fastion-plist">
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
                <van-col span="8">
                    <a class="item">
                        <img src="uploads/t5.jpg" alt="" class="figure"><span class="tit">印花卫衣</span>
                    </a>
                </van-col>
            </van-row>

        </div>
    </div>
</template>
<script>
export default {
	data() {
		return {
			images: [
				'http://172.16.40.70/shop/uploads/banner1.jpg',
				'http://172.16.40.70/shop/uploads/banner1.jpg',
				'http://172.16.40.70/shop/uploads/banner1.jpg',
			],
			active: 'home'
		}
	}
}
</script>
<style scoped>
.wrap{padding-bottom: 3.8rem;}
.banner{margin-top:0rem;}
.banner img { width:100%;}
.home-newgoods { padding: 0 0.15rem 0.35rem; margin-bottom: 0.3rem; margin-top:0.3rem; background: #ffffff; }
.home-newgoods .list-type2 .tit { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 0.4rem; padding: 0.3rem; line-height: 0.54rem; font-size: 0.8rem; color: #fff; white-space: nowrap; background-color: rgba(255, 57, 92, 0.8); }
.plist-puzzle { overflow: hidden;}
.plist-puzzle img { display: block; width: 100%; height: 100%; }
.plist-puzzle .b { float: left; width: 66.5%; height: 100%; }
.plist-puzzle .s { margin-left: 66.5%; height: 100%; }
.plist-puzzle .s .box { display: block; height: 32.5%; }
.home-imgtit{ width: 100%;}
.home-fashion{ background: #ffffff;}
.fastion-plist { overflow: hidden; margin-right: -0.15rem; }
.fastion-plist .item { position: relative; display: block; margin: 0 0.15rem 0.15rem 0; }
.fastion-plist .figure { display: block; width: 100%; }
.fastion-plist .tit { position: absolute; right: 0; bottom: 0; left: 0; height: 23px; line-height: 23px; font-size: 13px; color: #3f3f3f; text-align: center; background-color: rgba(255, 255, 255, 0.7); }
.fastion-plist .van-col{margin-top:0.1rem;}
</style>
